<template>
  <div style="margin-top: 60px; padding-left: 2%">
    <div class="MonitorContainer">
      <span>监控显示区域</span>
    </div>
    <div class="DetailContainer">
      <div><span style="color: gray">当前在寝人数：</span>{{ num }} 人</div>
      <br />
      <span style="display: block; color: gray"
        >在寝已登记人员：<br />
        <div v-for="(one, index) in nameList" :key="index" class="one">
          <div class="headicon">
            <img
              src="../assets/image/usericon.png"
              alt="headIcon"
              style="display: block; height: 100%; width: 100%"
            />
          </div>
          <a href="#" @click="PersonDetail()" class="name">{{ one }} </a>
        </div>
      </span>
      <br />
      <span
        ><span style="color: gray">未登记人员：</span
        >{{ num - nameList.length }} 人</span
      >
    </div>

    <div class="optionsContainer">
      <table class="table">
        <tr>
          <td>火灾报警开关</td>
          <td style="float: right">
            <switchc text="开启|关闭" v-model="status1"></switchc>
          </td>
        </tr>
        <tr>
          <td>温度提醒设置</td>
          <td style="float: right">
            <switchc text="开启|关闭" v-model="status2"></switchc>
          </td>
        </tr>
        <tr v-if="status2">
          <td></td>
          <td>
            <span>当温度低于 </span>
            <input v-model="minT" class="inlineInput" />
            <span>℃、当温度高于 </span>
            <input v-model="maxT" class="inlineInput" />
            <span>℃ 时对气温进行提醒</span>
          </td>
        </tr>
        <!-- <tr>
          <td>久坐提醒</td>
          <td style="float: right;"><switchc text="开启|关闭" v-model="status3"></switchc></td>
        </tr>
        <tr v-if="status3">
          <td></td>
          <td>
            <span>当学习时间超过 </span>
            <input v-model="maxTime" class="inlineInput">
            <span> min 时进行语音提醒</span>
          </td>
        </tr> -->
        <tr>
          <td>湿度提醒</td>
          <td style="float: right">
            <switchc text="开启|关闭" v-model="status3"></switchc>
          </td>
        </tr>
        <tr v-if="status3">
          <td></td>
          <td>
            <span>当湿度超过 </span>
            <input v-model="maxTime" class="inlineInput" />
            <span> % 时进行语音提醒</span>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
import switchc from "./Aswitch";

export default {
  data: function () {
    return {
      num: 4,
      nameList: ["test1", "test2", "test3"],
      status1: true,
      status2: true,
      status3: false,
      maxT: 30,
      minT: 15,
      maxTime: 60,
    };
  },
  methods: {
    PersonDetail() {
      // 显示用户详细信息：
    },
  },
  components: {
    switchc,
  },
};
</script>

<style>
.MonitorContainer {
  float: left;
  height: 330px;
  width: 645px;
  /* display: inline-block; */
  background-color: black;
  margin-right: 4%;
  line-height: 330px;
  text-align: center;
  color: white;
}
.DetailContainer {
  float: left;
  height: 330px;
  width: 250px;
  background-color: whitesmoke;
  font-size: 10px;
  padding: 20px 20px 0;
}
.optionsContainer {
  float: left;
  height: auto;
  width: 645px;
  background-color: whitesmoke;
  margin: 45px 0 20px;
  padding: 10px 30px 12px;
  border-radius: 8px;
}

.one {
  color: black;
  display: block;
  height: 50px;
  width: auto;
  padding: 10px 15px 0;
}
.headicon {
  height: 30px;
  width: 30px;
  float: left;
}
.name {
  float: left;
  margin: 7px 0;
  padding: 0px 11px;
  text-decoration: none;
  color: black;
}
.inlineInput {
  display: inline;
  width: 40px;
  height: 25px;
  line-height: 25px;
  border-radius: 5px;
  border-width: 1px;
  padding-left: 10.5px;
  border-color: whitesmoke;
  outline: none;
}
.table td {
  padding: 9px 9px 0;
  /* float: right; */
}
.table {
  width: 570px;
  color: gray;
}
.weui-switch-on {
  border-color: #00e9cb;
  background-color: #00e9cb;
}
.el-button--primary {
  background-color: #00e9cb;
  border-color: #00e9cb;
}
.el-menu-item.is-active {
  color: #00e9cb;
}
</style>